<template>
	<view class="order_box">
		<view class="flex_ld order_item" v-for="(item,index) in orderList" :key="index">
			<view class="flex_Z">
				<text class="f32 c3">{{item.phone}} 充值话费 </text>
				<text class="f26 c9">{{item.pay_time}}</text>
			</view>
			<view class="f36 c3 fw6">
				+{{item.amount}}
			</view>
		</view>
		<noDatas :xxxList="orderList" :status="status"></noDatas>
	</view>
</template>

<script>
	import { phoneOrder } from "@/api/local.js"
	export default{
		data(){
			return {
				page: 1,
				size: 10,
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				orderList:[]
			}
		},
		onShow() {
			this.getOrder()
		},
		onReachBottom() {
			console.log('触底加载');
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.getOrder()
			}
		},
		methods:{
			getOrder(){
				const data = {
					page:this.page,
					page_size:this.size
				}
				phoneOrder().then(res=>{
					console.log(res);
					let list = res.data.data;
					this.orderList = this.page == 1 ? list : this.orderList.concat(list);
					if (list.length < this.size) this.status = 'nomore';
					else this.status = 'loading';
				})
			}
			
		}
	}
</script>

<style>
	.order_box{
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 0 auto;
		margin-top: 30rpx;
	}
	.order_item{
		padding: 32rpx;
		border-bottom: 2rpx solid #f2f2f2;
	}
</style>